<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui">

    <div class="layout-topbar">
        <a class="menu-button" tabindex="0">
            <i class="pi pi-bars"></i>
        </a>
        <h:link styleClass="logo" >
            <p:graphicImage name="images/primefaces-logo.svg" library="showcase" />
        </h:link>
        <p:outputPanel id="app-theme-logo" class="app-theme">
            <p:graphicImage id="app-theme-image" name="images/themes/#{app.themeImage}" library="showcase" />
            <p:tooltip for="app-theme-logo" value="#{app.theme}" position="bottom" showDelay="0" />
        </p:outputPanel>

        <h:form styleClass="topbar-form">
            <ul class="topbar-menu">
                <li class="topbar-submenu">
                    <a tabindex="0">
                        <p:badge severity="danger" styleClass="inline">
                            <h:outputText value="Themes"/>
                        </p:badge>
                    </a>
                    <ul class="connected-overlay-in">
                                        <li class="topbar-submenu-header">PRIMEONE</li>
                        <li><p:commandLink actionListener="#{app.changeTheme('saga', false)}" oncomplete="App.changeTheme('saga', false)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/saga.png" alt="Saga"/><span>Saga</span></p:commandLink></li>
                        <li><p:commandLink actionListener="#{app.changeTheme('vela', true)}" oncomplete="App.changeTheme('vela', true)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/vela.png" alt="Vela"/><span>Vela</span></p:commandLink></li>
                        <li><p:commandLink actionListener="#{app.changeTheme('arya', true)}" oncomplete="App.changeTheme('arya', true)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/arya.png" alt="Arya"/><span>Arya</span></p:commandLink></li>
                                              <li class="topbar-submenu-header">LEGACY</li>
                        <li><p:commandLink actionListener="#{app.changeTheme('nova-light', false)}" oncomplete="App.changeTheme('nova-light', false)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/nova.png" alt="Nova"/><span>Nova</span></p:commandLink></li>
                        <li><p:commandLink actionListener="#{app.changeTheme('nova-dark', true)}" oncomplete="App.changeTheme('nova-dark', true)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/nova-alt.png" alt="Nova Alt"/><span>Nova Alt</span></p:commandLink></li>
                        <li><p:commandLink actionListener="#{app.changeTheme('nova-colored', true)}" oncomplete="App.changeTheme('nova-colored', true)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/nova-accent.png" alt="Nova Accent"/><span>Nova Accent</span></p:commandLink></li>
                        <li><p:commandLink actionListener="#{app.changeTheme('luna-amber', true)}" oncomplete="App.changeTheme('luna-amber', true)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/luna-amber.png" alt="Luna Amber"/><span>Luna Amber</span></p:commandLink></li>
                        <li><p:commandLink actionListener="#{app.changeTheme('luna-blue', true)}" oncomplete="App.changeTheme('luna-blue', true)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/luna-blue.png" alt="Luna Blue"/><span>Luna Blue</span></p:commandLink></li>
                        <li><p:commandLink actionListener="#{app.changeTheme('luna-green', true)}" oncomplete="App.changeTheme('luna-green', true)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/luna-green.png" alt="Luna Green"/><span>Luna Green</span></p:commandLink></li>
                        <li><p:commandLink actionListener="#{app.changeTheme('luna-pink', true)}" oncomplete="App.changeTheme('luna-pink', true)" update=":app-theme-logo"><h:graphicImage name="showcase/images/themes/luna-pink.png" alt="Luna Pink"/><span>Luna Pink</span></p:commandLink></li>
                    </ul>
                </li>
            
               
            </ul>
        </h:form>
    </div>
</ui:composition>
